<template>
  <!-- 个人报表 -->
  <div style="height: 100%;">
    <el-table ref="tableRef" v-loading="tableLoading" :summary-method="customSummaryMethod" :show-summary="true"
      height="100%" stripe :data="tableData">
      <template v-for="(colums, index) in tableColums">
        <el-table-column :type="colums.type" :fixed="colums.fixed" :width="colums.width" :minWidth="colums.minWidth" :formatter="colums.formatter"
          :prop="colums.prop" :label="colums.label" :showOverflowTooltip="colums.showOverflowTooltip"
          :sortable="colums.sortable"></el-table-column>
      </template>
    </el-table>
    <PersonPopSelect ref="personPopSelect" @resetSearch="resetSearch" />
  </div>


</template>

<script>
import PersonPopSelect from "./personPopSelect.vue";
import { Table, TableColumn } from 'element-ui'
import dayjs from "dayjs";
export default {
  components: {
    ElTable: Table,
    ElTableColumn: TableColumn,
    PersonPopSelect
  },
  data() {
    return {
      tableData: [],
      search: {
        begin_time: dayjs().format("YYYY-MM-DD"),
        end_time: dayjs().format("YYYY-MM-DD"),
        type: 'pre'
      },
      tableColums: [
        { label: "日期", prop: "date", sortable: true, minWidth: 120, fixed: "left" },
        { label: "行为数", prop: "action", sortable: true, minWidth: 120 },
        { label: "加微数", prop: "wechat", sortable: true, minWidth: 130 },
        {
          label: "加微率",
          prop: "wechat_rate",
          sortable: true,
          minWidth: 120
        },
        {
          label: "定金数",
          prop: "deposit",
          sortable: true,
          minWidth: 120
        },
        { label: "定金人数", prop: "deposit_person", sortable: true, minWidth: 120 },
        {
          label: "退定金数",
          prop: "deposit_refuse_num",
          sortable: true,
          minWidth: 120
        },
        {
          label: "退定金人数",
          prop: "deposit_refuse_person",
          sortable: true,
          minWidth: 120
        },
        {
          label: "定金率",
          prop: "deposit_rate",
          sortable: true,
          minWidth: 120
        },
        { label: "推送数", prop: "deposit_push", sortable: true, minWidth: 120 },
        { label: "接收数", prop: "deposit_get", sortable: true, minWidth: 120 },
        { label: "拒接数", prop: "deposit_refuse", sortable: true, minWidth: 120 },
        { label: "到店人头数", prop: "arrive_person", sortable: true, minWidth: 120 },
        {
          label: "到店业绩（￥）",
          prop: "achieve",
          sortable: true,
          minWidth: 150
        },
        {
          label: "新客到店业绩（￥）",
          prop: "new_achieve",
          sortable: true,
          minWidth: 200
        },
        {
          label: "老转新到店业绩（￥）",
          prop: "oldnew_achieve",
          sortable: true,
          minWidth: 200
        },
        {
          label: "到店客单（￥）",
          prop: "achieve_rate",
          sortable: true,
          minWidth: 150
        }
      ],
      tableLoading: true,
    }
  },
  created() {
    this.getList()
  },
  mounted() {

  },
  methods: {
    async getList() {
      this.tableLoading = true
      let res = await this.$service.preSale.presalemonday({ ...this.search })
      this.tableData = res;
      console.log(res, 'res');

      this.$nextTick(() => {
        // 强刷页面
        this.$refs.tableRef.doLayout()
        this.tableLoading = false
      })
    },
    openSearch() {
      this.$refs.personPopSelect.open();
      this.$nextTick(() => {
        this.$refs.personPopSelect.setData(this.search);
      });
    },
    customSummaryMethod({ columns, data }) {
      const sums = [];

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }

        const prop = column.property;

        const values = data.map(item => Number(item[prop]));

        if (values.every(isNaN)) {
          sums[index] = '';
        } else {
          if (['deposit_rate', 'wechat_rate',].includes(prop)) {
            const total = values.reduce((acc, val) => (isNaN(val) ? acc : acc + val), 0);
            sums[index] = total + '%';
          } else {
            const total = values.reduce((acc, val) => (isNaN(val) ? acc : acc + val), 0);
            sums[index] = total;
          }

        }
      });
      console.log(sums, 'sums');

      return sums;
    },
    resetSearch(data) {
      this.search = { ...this.search, ...data }
      this.getList()
    }
  },
}
</script>
<style scoped lang='scss'></style>
